<template>
    <pageLayoutContent class="organization">
        <div class="organization-tree">
            <p>机构管理</p>
            <a-spin :spinning="loading" class="organization-tree-scorll">
            <div >
                <a-tree :tree-data="treeData"
                        @select="treeSelect"
                >
                    <template slot="title" slot-scope="row">
                        <p class="tree-title">
                            <span>{{row.title}}</span>
                            <span class="tree-title-btn" @click.stop="() => {}">
                            <a-icon type="apartment" @click.native="addInstitutions(null)"/>
                            <a-icon type="edit" @click.native="addInstitutions(row)"/>
                        </span>
                        </p>
                    </template>
                </a-tree>
            </div>
            </a-spin>
        </div>
        <div class="organization-table">
            <div class="organization-table-head">
                <a-button type="primary" @click="userModel(null)">
                    添加账号
                </a-button>
            </div>
            <pageTable :columns="columns"
                       :api="institutionsTable"
                       :scorllWidth="'calc(100vw - 700px)'"
                       ref="pageTable"/>
        </div>
        <a-drawer
                :title="editUserData ? '编辑账号' : '添加账号'"
                :width="280"
                :closable="false"
                placement="right"
                :visible="userVisible"
        >
            <a-form :form="editUserForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                <a-form-item label="用户名">
                    <a-input
                            v-decorator="['username']"
                    />
                </a-form-item>
                <a-form-item label="姓名">
                    <a-input
                            v-decorator="['name']"
                    />
                </a-form-item>
                <a-form-item label="手机">
                    <a-input
                            v-decorator="['phone']"
                    />
                </a-form-item>
                <a-form-item label="密码">
                    <a-input
                            v-decorator="['password']"
                    />
                </a-form-item>
                <a-form-item label="确认密码">
                    <a-input
                            v-decorator="['confirmPassword']"
                    />
                </a-form-item>
                <a-form-item label="机构">
                    <a-input
                            v-decorator="['institutions']"
                    />
                </a-form-item>
                <a-form-item label="是否启用">
                    <a-switch v-decorator="['switch']" />
                </a-form-item>
            </a-form>
            <p class="form-btn">
                <a-button  @click="userVisible = !userVisible">
                    取消
                </a-button>
                <a-button type="primary">
                    确认
                </a-button>
            </p>
        </a-drawer>
        <modelForm :width="480"
                   ref="institutionsForm"
                   :confirm="confirmInstitutions"
                   :formConfig="institutionsFormProp"
                   />
    </pageLayoutContent>
</template>

<script>
    function style({state}, isbtn) {
        return {
            color: state ? isbtn ? '' : '#000' : '#a6a6a6',
            'pointer-events': isbtn ? state ? '' : 'none' : '',
        }
    }
    import {institutionsList, institutionsTable} from "@/services/institutions";
    import pageLayoutContent from "@/components/pageLayoutContent";
    import pageTable from "@/components/pageTable/pageTable";
    import modelForm from '../../components/modelForm';
    import {phoneCheck} from '../../utils/rules';
    const institutionsFormProp = [
        {prop: 'name', label: '机构名称', rules: [{ required: true, message: '请输入机构名称' }]},
        {prop: 'contact', label: '联系人', rules: [{ required: true, message: '请输入联系人' }]},
        {prop: 'contactPhone', label: '联系电话', rules: [{ required: true, message: '请输入联系电话' }, {validator:phoneCheck.bind(this)}]},
        {prop: 'dataTitle', label: '数据看板标题', rules: []},
        {prop: 'platformName', label: '平台名称', rules: []},
        {prop: 'platforLogo', type: 'upload', label: '平台logo', rules: []},
    ]
    export default {
        name: "index",
        components: {
            pageLayoutContent,
            pageTable,
            modelForm
        },
        data() {
            const columns = [
                {
                    title: '用户名',
                    style,
                    dataIndex: 'username',
                    key: 'username',
                    fixed: 'left',
                },
                {
                    title: '联系人',
                    style,
                    dataIndex: 'contact',
                    key: 'contact',
                },
                {
                    title: '手机号',
                    dataIndex: 'phone',
                    key: 'phone',
                    style,
                },
                {
                    title: '机构',
                    style,
                    dataIndex: 'institutions',
                    key: 'institutions',
                    ellipsis: true,
                },
                {
                    title: '账号状态',
                    dataIndex: 'state',
                    key: 'state',
                    style,
                    formatting: (t) => t ? '正常' : '禁用'
                },
                {
                    title: '操作',
                    key: 'id',
                    width: 100,
                    render: 'btn',
                    btn: [
                        {
                            icon: 'iconbianji', event: (record) => this.userModel(record), style: r => style(r, true)
                        },
                    ]
                },
            ];
            return{
                data: [],
                columns,
                treeData: [],
                loading: false,
                userVisible: false,
                editUserData: null,
                editUserForm: this.$form.createForm(this, {}),
                institutionsFormProp,
            }
        },
        created() {
            this.getTree();
        },
        methods: {
            institutionsTable,
            addInstitutions(data) {
                let title = data ? '编辑机构信息' : '添加子机构';
                if (data) {
                    data.name = '测试名字';
                    data.contact = '测试联系人';
                    data.contactPhone = '15825967812';
                }
                this.$refs['institutionsForm'].showModel({title, data});
            },
            confirmInstitutions(data, callback) {
                console.log(data);
                setTimeout(() => {
                    this.$message.success('操作成功')
                    callback()
                }, 2000);
            },
            treeSelect() {
                this.$refs['pageTable'].requestData();
            },
            userModel(data=null) {
                this.editUserData = data;
                this.userVisible = true;
            },
            getTree() {
                this.loading = true;
                institutionsList().then(({data}) => {
                    let maps = (arr) => {
                        return arr.map(v => {
                            if (v.children && v.children.length) {
                                v.children = maps(v.children);
                            }
                            return {
                                ...v,
                                scopedSlots: { title: 'title' }
                            }
                        })
                    }
                    this.treeData = maps(data.list);
                    this.loading = false;
                })
            }
        }
    }
</script>

<style lang="less">
.organization{
    display: flex;
    background: transparent!important;
    &-tree{
        background: #fff;
        height: inherit;
        width: 326px;
        min-width: 326px;
        padding: 22px 0 0 22px;
        display: flex;
        flex-direction: column;
        position: relative;
        p{
            color: rgba(56, 56, 56, 1);
            font-size: 16px;
        }
        &-scorll{
            overflow-y: auto;
            overflow-x: hidden;
            position: absolute;
            bottom: 15px;
            left:24px;
            right: 0;
            top: 55px;
        }
        &-scorll::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }
        &-scorll::-webkit-scrollbar-track {
            border-radius: 10px;
            background-color: transparent;
        }
        &-scorll::-webkit-scrollbar-thumb {
            background-color: transparent;
            border-radius: 10px;
        }
        &-scorll:hover{
            &::-webkit-scrollbar-thumb {
                background-color: rgba(204,204,204,0.44);
            }
        }
        .tree-title{
            display: flex;
            justify-content: space-between;
            user-select: none;
            span:first-child{
                flex: 1;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            &-btn{
                opacity: 0;
                transform: translateX(10px);
                transition: all .3s linear;
                i{
                    margin-left: 12px;
                    color: rgba(156, 156, 156, 1);
                    transition:all linear .3s ;
                    &:hover{
                        color: #1890ff!important;
                    }
                }
            }
            &:hover{
                .tree-title-btn{
                    opacity: 1!important;
                    transform: translateX(0px);
                }
            }
        }
        .ant-tree li .ant-tree-node-content-wrapper{
            width: calc(100% - 40px);
        }
        .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected{
            background: #fff;
            p{
                color: #1890ff!important;
            }
            .ant-tree-title{
                color: #1890ff!important;
            }
        }
    }
    &-table{
        background: #fff;
        height: inherit;
        flex: auto;
        margin-left: 15px;
        &-head{
            height: 54px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 0 30px;
            box-sizing: border-box;
            border-bottom: 1px solid #f5f5f5;
        }
    }
}
.form-btn{
    display: flex;
    padding-top: 100px;
    justify-content: space-around;
}
</style>
